<!--
@file: list
@description:
@author: whr2349
@time: 2021/6/7 15:34
-->
<template>
  <div>
    <!--    <div class="" style="width: 100%;height: 50px;background-color: aquamarine"></div>-->
    <div style="display: flex">
      <div ref="aside" style="width: 200px;background-color: antiquewhite;position: relative;cursor: default;">

      </div>
      <div ref="container" style="flex: 3;">

      </div>
      <div ref="minimapContainer" style=""></div>
    </div>
  </div>
</template>

<script>
import {Whrflow} from "./whrflow"

export default {
  name: "list",
  data() {
    return {
      flow: null,
      data: {}
    }
  },
  mounted() {

    this.flow = new Whrflow({
      graph: {
        container: this.$refs.container,

        // panning: {
        //   enabled: true,
        //   modifiers: 'shift',
        // },
        grid: {
          size: 10,
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#e5e5e5',
              thickness: 1
            },
            {
              color: '#e5e5e5',
              thickness: 1,
              factor: 4
            }
          ]
        },
        // 开启后可以通过点击或者套索框选节点。
        selecting: {
          enabled: true,
          multiple: true,//是否启用点击多选，默认为 true。启用多选后按住 ctrl 或 command 键点击节点实现多选。
          rubberband: true,//是否启用框选，默认为 false。开启框选时，默认只能框选节点，如果需要自定义框选节点或者边，可以配置 rubberNode 和 rubberEdge 属性。
          movable: true,//在多选情况下，选中的节点是否一起移动，设置为 true 时，拖动选框框选的节点一起移动，默认为 true。
          showNodeSelectionBox: true//是否显示节点的选择框，默认为 false，建议使用下面的样式定制方法去定制自己的选择框样式。
        },
        keyboard: true,
        snapline: true,
        history: true,
        clipboard: true,
        scroller: {
          enabled: true,
          pannable: true,
          modifiers: 'shift',
          pageBreak: true,
          cursor:'default',
          padding:0,
        },
        //中间滚轮放大缩小
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta'],
          minScale: 0.5,
          maxScale: 2
        },
        connecting: {
          snap: true,
          highlight:true,

        },

        minimap: {
          enabled: true,
          container: this.$refs.minimapContainer,
        },

        width: 900,
        height: 700,
      },
      stencil: {
        container: this.$refs.aside,
        title: 'WHR流程引擎',
        search: true,
        collapsable: true,

        stencilGraphWidth: 200,
        stencilGraphHeight: 200,

        groups: [
          {
            name: 'easy_nodes',
            title: '简单节点',
            collapsable: true
          },
          {
            name: 'complex_nodes',
            title: '复杂节点',
            collapsable: false
          }
        ],
      }
    })

  }
}
</script>

<style scoped>
.x6-graph-scroller {
  border: 1px solid #f0f0f0;
  margin-left: -1px;
}

</style>